import { Search, Button, Tag, Popup } from 'react-vant';
import styles from './find.module.css'
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { http } from '../../utils'

const Find = () => {
    const navigate = useNavigate()


    // 输入框值
    const [value, setValue] = useState('');

    // 店铺商品切换
    const [type, setType] = useState('店铺')
    const [change, setChange] = useState(false)

    // 0搜索1搜索店铺2搜索商品
    const [num, setNum] = useState(0)

    // 筛选条件样式切换控制变量
    const [sift, setSift] = useState('综合排序')
    const [sift1, setSift1] = useState('')

    const [distance,setDistance] = useState('')
    const [price,setPrice] = useState('')
    const [num1,setNum1] = useState('')
    const [time,setTime] = useState('')

    useEffect(() => {
        if(sift!=''){
            if(sift=='距离最近'){
                setDistance(1)
                setPrice('')
            }else if(sift=='起送价最低'){
                setPrice(1)
                setDistance('')
            }else if(sift=='综合排序'){
                setDistance('')
                setPrice('')
            }
        }

        if(sift1!=''){
            if(sift1=='销量'){
                setNum1(1)
                setTime('')
            }else if(sift1=='速度'){
                setTime(1)
                setNum1('')
            }
        }
    }, [sift,sift1])


    useEffect(() => {
        getShop()
        
    }, [distance,price,num1,time])

    // 综合排序显示控制变量
    const [state, setState] = useState(false);


    // 请求店铺
    const [shop, setShop] = useState([])

    const [kong,setKong] = useState(false)
    const getShop = async () => {
        let res = await http.get(`/wwz/getShop?key=${value}&distance=${distance}&time=${time}&price=${price}&num1=${num1}`)
        if(res.code==200){
            setShop([...res.data])
            setKong(false)
        }else{
            setKong(true)
        }
        
        
        
    }

    return (
        <div className={num == 0 ? styles.body : styles.body1}>
            {/* 顶部 */}
            <div className={num == 0 ? styles.top : styles.top1}>
                <div className={styles.b1}>
                    {/* 切换 */}
                    {change ?
                        <Tag size='large'
                            style={{ position: 'absolute', top: '.4rem', left: '0.7rem' }}
                            onClick={() => {
                                setType(type == '店铺' ? '商品' : '店铺')
                                setChange(false)
                            }}
                        >{type == '店铺' ? '商品' : '店铺'}</Tag> : ''}

                    <img src="/left.svg" alt="" onClick={() => navigate(-1)} />
                    <Search
                        label={
                            <>
                                <Tag color='none' textColor='black' size='large'
                                    onClick={() => { setChange(!change) }}
                                >{type}</Tag>
                                <img src="/bot.svg" alt="" style={{ verticalAlign: 'middle' }} />
                            </>
                        }
                        value={value}
                        onChange={setValue}
                        clearable
                        shape='round'
                        style={{
                            border: '1px solid #FF654D',
                            borderRadius: '1rem',
                            padding: '.01rem',
                            width: '68%'
                        }}
                        placeholder="请输入搜索关键词" />
                    <Button
                        color='linear-gradient(to right,#FF9901,#FF654D)'
                        round
                        style={{ width: '20%' }}
                        onClick={() => {
                            type == '店铺' ? setNum(1) : setNum(2)
                            getShop()
                        }}
                    >搜索</Button>
                </div>

                {/* 筛选 */}
                {num != 0 ?
                    <div className={styles.b2}>
                        <Tag color='none'
                            textColor={['综合排序', '距离最近', '起送价最低'].includes(sift) ? '#ff644d' : '#797979'} size='large'
                            onClick={() => { setState(true) }}
                        >{sift}</Tag>
                        <Popup
                            visible={state}
                            style={{ height: '30%' }}
                            position='top'
                            onClose={() => { setState(false) }}
                        >
                            {
                                ['综合排序', '距离最近', '起送价最低'].map((i, index) => {
                                    return (
                                        <p key={index}
                                            className={styles.p1}
                                            onClick={() => {
                                                setSift(i)
                                                setState(false)
                                            }}
                                        ><span className={sift == i ? styles.s1 : ''}>{i}</span>{sift == i ? <img src="/yse.svg" alt="" /> : ''}</p>
                                    )
                                })
                            }

                        </Popup>
                        <Tag color='none' textColor={sift1 == '销量' ? '#ff644d' : '#797979'} size='large' onClick={() => { setSift1('销量') }}>销量</Tag>
                        <Tag color='none' textColor={sift1 == '速度' ? '#ff644d' : '#797979'} size='large' onClick={() => { setSift1('速度') }}>速度</Tag>
                    </div>
                    : ''}
            </div>

            {/* 搜索页面 */}
            {num == 0 ? <>
                {/* 搜索推荐 */}
                <div className={styles.box1}>
                    <b>搜索推荐</b>
                    <Tag color='none' textColor='#797979'>
                        换一批
                        <img src="/change.svg" alt="" />
                    </Tag>
                </div>
                <div className={styles.box2}>
                    {
                        ['饺子', '隆江猪脚饭', '烤鱼', '周黑鸭', '花大姐', '麦当劳', '睡觉', '烤乳猪', '羊杂汤'].map((i, index) => {
                            return (
                                <Tag color='#F5F5F5' textColor='black' size='large' round key={index}
                                onClick={()=>{
                                    setValue(i)
                                    type == '店铺' ? setNum(1) : setNum(2)
                                    getShop()
                                }}
                                >{i}</Tag>
                            )
                        })
                    }

                </div>
                {/* 历史搜索 */}
                <div className={styles.box1}>
                    <b>历史搜索</b>
                    <img src="/del.svg" alt="" />
                </div>
                <div className={styles.box2}>
                    {
                        ['饺子', '隆江猪脚饭', '烤鱼', '周黑鸭', '花大姐', '麦当劳', '睡觉', '烤乳猪', '羊杂汤'].map((i, index) => {
                            return (
                                <Tag color='#F5F5F5' textColor='black' size='large' round key={index}>{i}</Tag>
                            )
                        })
                    }

                </div>
            </> : ''}


            {/* 搜索店铺 */}
            {num == 1 ?

                <div className={styles.findshop}>
                    {/* 商家 */}
                    {kong?<h1>暂无搜索结果</h1>:''}
                    {
                        shop.map((i, index) => {
                            return (
                                <div className={styles.recommend}>
                                    <img src="/shop1.svg" alt="" />
                                    <div className={styles.info}>
                                        <p><b>{i.name}</b></p>
                                        <p>
                                            <Tag textColor='#ff6600' color='none'>4.5分</Tag>
                                            <Tag textColor='#797979' color='none'>月售{i.num}</Tag>
                                            <Tag textColor='#797979' color='none'>月售312</Tag>
                                            <Tag textColor='#ff6600' color='#FAF5F5'>平台专送</Tag>
                                        </p>
                                        <p>
                                            <Tag textColor='#797979' color='none'>起送￥20</Tag>
                                            <Tag textColor='#797979' color='none'>免配送费</Tag>
                                            <Tag textColor='#797979' color='none'>{i.time}分钟</Tag>
                                            <Tag textColor='#797979' color='none'>{i.distance}km</Tag>
                                        </p>
                                        <p>
                                            {['50减3', '100减6', '150减10'].map((i, index) => {
                                                return (
                                                    <Tag
                                                        key={index}
                                                        textColor='#ff6600'
                                                        plain
                                                    >{i}</Tag>
                                                )
                                            })}
                                        </p>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>

                
                : ''}
                

            {/* 搜索商品 */}
            {num == 2 ?
                <div className={styles.findfood}>
                    <div className={styles.boxItem}>
                        <img src="/food.svg" alt="" />
                        <b>香辣鸡块汉堡</b>
                        <p><b>￥18</b><Tag color='none' textColor='#797979'>月销509</Tag></p>
                        <Tag color='none' textColor='#797979'>附近热销商品</Tag>
                        <Tag color='none' textColor='black'>
                            <img src="/shop.svg" alt="" style={{ width: '0.15rem' }} />
                            华莱士-凤凰广2店
                            <img src="/right.svg" alt="" style={{ width: '0.1rem' }} />
                        </Tag>
                        <Tag color='none' textColor='#797979'>20分钟|配送费4元</Tag>
                    </div>
                </div> : ''}
        </div>
    )
}

export default Find;